<template>
  <div class="system_type_index">
    <ga-comment :author="type || '-'">
      <template #avatar>
        <ga-avatar
          :size="28"
          v-if="imagePath"
          shape="square"
          :style="{ backgroundColor: '#fff' }"
        >
          <!-- <img alt="" :src="imagePath" /> -->
          <systemIcon :icon="icon || type" />
        </ga-avatar>
      </template>
      <template #content>
        {{ content }}
      </template>
    </ga-comment>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import systemIcon from "common/systemIcon.vue";
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
  icon: {
    type: String,
    default: "",
  },
});

// const imagePath = ref("");
// onMounted(async () => {
//   if (!props.icon && !props.type) return;
//   try {
//     const module = await import(`@/assets/images/system/${props.icon || props.type}.png`);
//     imagePath.value = module.default;
//   } catch (error) {
//     console.error("Image not found:", error);
//   }
// });
</script>

<style scoped lang="scss">
.system_type_index {
  :deep(.garco-comment) {
    margin: 0;
    align-items: center;
    display: flex;
  }
  :deep(.garco-comment-author) {
    color: #011948;
  }
  :deep(.garco-comment-content) {
    color: #2c406899;
    font-size: 12px;
  }
  :deep(.garco-comment-avatar) {
    margin-right: 8px;
  }
}
</style>
